<template>
  <div class="e-message">
    <i @click="open" class="iconfont edit">&#xe607; 设置警戒值</i>
  </div>
</template>

<script>
export default {
  name: 'ElMessage',
  props: {
    'value': {
      type: String,
      default: 0
    },
    'item': {
      type: String,
      default: ''
    }
  },
  methods: {
    open () {
      this.$prompt(`${this.item}异常人数与总人数的占比`, '设置预警值', {
        inputValue: parseFloat(this.value),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9]\d{0,1}$/,
        inputErrorMessage: '一百内整数'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: `${this.item}报警值已改为: ${value}`
        })
        this.$emit('getMessage', value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  }
}
</script>

<style>
.e-message {
  opacity: .6;
  color: #ffe98f;
  float: right;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
}
.edit {
  font-size: 12px;
}
div.el-message-box__wrapper .el-message-box{
  background-color: transparent;
  background: linear-gradient(to bottom right, #0e175e, #1f277c);
  border: 1px solid #6bd7f3;
}
div.el-message-box__wrapper .el-message-box__header {
  background: linear-gradient(to bottom right, #315bff, #53e9ee);
  padding: 15px;
}
div.el-message-box__wrapper .el-input__inner {
  background-color: #080d3e;
  border:none;
  color: #ffeb90;
}
div.el-message-box__wrapper .el-message-box__title {
  color: #080d3e;
}
div.el-message-box__wrapper .el-message-box__headerbtn {
  top: 12px;
}
div.el-message-box__wrapper i {
  color: #080d3e!important;
}
div.el-message-box__wrapper .el-message-box__content {
  color: #fff;
}
div.el-message-box__wrapper .el-button--default {
  background: linear-gradient(to right, #9da0af, #6f75b3);
  border: none;
  color: #fff;
}
div.el-message-box__wrapper .el-button--primary {
  background: linear-gradient(to right, #53e9ee, #315bff);
}
</style>
